<template>
  <div class="searchRes">
    <ttnavbar title="搜索结果"></ttnavbar>
    <!-- 搜索结果列表 -->
    <div class="items">
      <div
        class="item"
        v-for="(item, index) in searlist"
        :key="index"
        @click="toDetail(item.art_id)"
      >
        <!-- 标题区域 -->
        <div class="title">
          <span v-html="item.title"></span>
          <div class="img" :class="{ pd: item.cover.images.length < 3 }">
            <img
              :src="items"
              alt=""
              v-for="(items, indexs) in item.cover.images"
              :key="indexs"
            />
          </div>
        </div>
        <!-- user区域 -->
        <div class="user">
          <span class="username">{{ item.aut_name }}</span>
          <span class="comSum">{{ item.comm_count }}评论</span>
          <span class="time">{{ item.pubdate | mydayjstime }}</span>
        </div>
        <!-- 文章数据区域 -->
        <van-row class="data">
          <van-col span="8" class="comment"
            ><van-icon name="comment-o" /><span>
              {{ item.comm_count }}
            </span></van-col
          >
          <van-col span="8" class="star"
            ><van-icon name="like-o" />点赞</van-col
          >
          <van-col span="8" class="share"
            ><van-icon name="share-o" />分享</van-col
          >
        </van-row>
      </div>
    </div>
  </div>
</template>
<script>
import { mapState } from 'vuex'
export default {
  data () {
    return {
      searlist: []
    }
  },
  created () {
    const ci = this.$route.query.ci
    this.searlist = [...this.searchList]
    this.searlist.forEach(item => {
      item.title = item.title.replace(
        ci,
        `<span style='color:red'>${ci}</span>`
      )
    })
    console.log(this.searlist)
  },
  computed: {
    ...mapState(['searchList'])
  },
  methods: {
    toDetail (id) {
      console.log(id)
      this.$router.push(`/articleDetail/${id}`)
    }
  }
}
</script>
<style lang="less" scoped>
.searchRes {
  background-color: #f5f7f9;
  height: 100vh;

  .items {
    margin-top: 10px;
    .item {
      margin-bottom: 10px;
      background-color: #fff;
      .title {
        display: flex;
        padding-top: 10px;
        justify-content: space-between;
        flex-wrap: wrap;
        font-size: 16px;
        color: #515151;
        font-weight: 700;
        width: 100%;
        span {
          padding: 0 15px;
          flex: 1;
        }
        .pd {
          padding-right: 15px;
        }
        .img {
          padding-top: 10px;
          img {
            width: 124px;
            margin-left: 1px;
            height: 73px;
          }
        }
      }
      .user {
        padding: 0 15px;
        padding-top: 15px;
        padding-bottom: 5px;
        font-size: 12px;
        color: #b1a9be;
        .username {
          margin-right: 10px;
        }
        .comSum {
          margin-right: 10px;
        }
        .time {
          margin-right: 10px;
        }
      }
      .data {
        padding: 0 15px;
        height: 50px;
        box-sizing: border-box;
        font-size: 16px;
        line-height: 50px;
        text-align: center;
        border-top: 1px solid #f3f3f3;
        .comment {
          .van-icon {
            font-size: 18px;
            vertical-align: middle;
            margin-right: 3px;
          }
        }
        .star {
          border-left: 1px solid #f3f3f3;
          border-right: 1px solid #f3f3f3;
          .van-icon {
            font-size: 18px;
            vertical-align: middle;
            margin-right: 3px;
          }
        }
        .share {
          .van-icon {
            font-size: 18px;
            vertical-align: middle;
            margin-right: 3px;
          }
        }
      }
    }
  }
}
</style>
